<template>
  <div>
    <!-- 按键修饰符： -->
    <!-- .enter：回车键 -->
    <!-- .shift -->
    <!-- .alt -->
    <!-- .tab -->
    <!-- .alt.enter:组合键(同时按) -->
    <input type="text" @keyup.enter="inputHandler" />

    <hr />

    <div class="father" @click="fatherHandler">
      <!-- 事件修饰符： -->
      <!-- .stop:阻止冒泡 -->
      <!-- .prevent:阻止默认的行为 -->
      <!-- .self:点击的目标元素是自身才会触发 -->
      <!-- .capture:捕获（由外到内） -->
      <!-- .once:仅触发一次 -->
      <div class="son" @click="sonHandler"></div>
    </div>

    <hr />

    <div>
      <button @click="Handler1">hi</button>
      <!-- 显示传递事件对象 -->
      <button @click="Handler2($event, 666)">hello</button>
    </div>
  </div>
</template>

<script setup>
const inputHandler = () => {
  // if (event.keyCode === 13) {
  //   console.log('回车键登录');
  // }
  console.log("登录");
};

const fatherHandler = () => {
  console.log("fatherHandler");
};
const sonHandler = (event) => {
  // 阻止冒泡
  // event.stopPropagation();
  console.log("sonHandler");
};

const Handler1 = (event) => {
  // event事件对象
  console.log("Handler1");
  console.log(event);
};
const Handler2 = (event, a) => {
  // event.stopPropagation(): 阻止事件冒泡
  // event.preventDefault(): 阻止默认行为
  console.log(a, event);
};
</script>

<style  scoped>
.father {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
  width: 200px;
  height: 200px;
  border: 2px solid #ccc;
}
.son {
  width: 70px;
  height: 70px;
  background-color: skyblue;
}
</style>